// 多基金指令
import React from 'react';
import { Tabs } from 'antd';
const { TabPane } = Tabs;
import { ContentPackage, PrimaryC } from '../../../comps';
import QueryC from './query';
import AddNew from './addNew';
import Bond from './bond';
import FinaFlocking from './finaFlocking';
import InterbankBack from './interbankBack';
import NonstandardOrder from './nonstandardOrder';
import moment from 'moment';
import _ from 'lodash';
class moreFundsOrder extends React.Component {
  state = {
    activeKey: '0', // teb默认选中
    pageStatus: 1, // 页面状态 1-主页  2-新增页
    queryItems: {
      // 存储最新的查询条件
      beginDate: moment().format('YYYY-MM-DD'),
      endDate: moment().format('YYYY-MM-DD'),
    },
    bondQuery: {}, //债券查询条件
    inbackQuery: {}, //回购查询条件
    finaQuery: {}, //理财直融查询条件
    nonstandaerQuery: {}, //非标查询条件
  };

  //初始化函数
  componentDidMount() {
    this.getData();
  }

  //teb切换响应
  tebOnchange = (val) => {
    this.setState(
      {
        activeKey: val,
      },
      () => {
        this.getData();
      },
    );
  };

  // 获取数据
  getData = () => {
    const { activeKey, queryItems } = this.state;
    if (activeKey == '0') {
      this.setState({ bondQuery: queryItems });
    } else if (activeKey == '4') {
      this.setState({ inbackQuery: queryItems });
    } else if (activeKey == '7') {
      this.setState({ finaQuery: queryItems });
    } else if (activeKey == '12') {
      this.setState({ nonstandaerQuery: queryItems });
    }
  };

  // 新增成功刷新页面
  refresh = (e) => {
    let timestamp = new Date().getTime(); // 时间戳,新增成功的时候 不管条件有没有改变 都有触发查询
    let queryItems = _.cloneDeep(this.state.queryItems);
    queryItems.timestamp = timestamp;
    let length = document.getElementsByClassName('mainTabPane').length;
    for (let i = 0; i < length; i++) {
      document.getElementsByClassName('mainTabPane')[i].scrollTop = 0; // 新增成功时使滚动条在顶部
    }

    this.setState({ pageStatus: 1, activeKey: e, queryItems }, () => {
      this.getData();
    });
  };

  // 响应查询
  onQuery = (query) => {
    const { activeKey } = this.state;
    let timestamp = new Date().getTime(); // 时间戳,点查询的时候 不管条件有没有改变 都有触发查询
    let newactiveKey;
    if (query.securityType) {
      newactiveKey = query.securityType == '3' ? 4 : query.securityType; //证券代码的securityType为4或4时都跳转银行间回购tab
    } else {
      newactiveKey = activeKey;
    }
    query.timestamp = timestamp;
    delete query.securityType;
    this.setState({ queryItems: query, activeKey: newactiveKey }, () => {
      this.getData();
    });
  };

  // 响应重置
  onClear = () => {
    const { activeKey } = this.state;
    if (activeKey == '0') {
      this.bond.onClear();
    } else if (activeKey == '4') {
      this.interbankBack.onClear();
    } else if (activeKey == '7') {
      this.finaFlocking.onClear();
    } else if (activeKey == '12') {
      this.nonstandardOrder.onClear();
    }
  };

  // 新建
  create = () => {
    this.setState({ pageStatus: 2 });
  };

  render() {
    const { activeKey, pageStatus, bondQuery, inbackQuery, finaQuery, nonstandaerQuery, activeKeys } = this.state;
    return (
      <ContentPackage
        title='多产品簿记'
        contentHtml={
          <div className='moreFundsMain'>
            <div style={{ display: pageStatus == 1 ? 'block' : 'none' }}>
              <QueryC onQuery={this.onQuery} onClear={this.onClear} />
              <div style={{ marginTop: '10px' }}>
                <PrimaryC title='新建' onClick={this.create} />
              </div>
              <div style={{ marginTop: '10px' }}>
                <Tabs activeKey={activeKey} defaultActiveKey='0' onChange={this.tebOnchange}>
                  <TabPane tab='债券' key='0'>
                    <Bond queryItems={bondQuery} onRef={(ref) => (this.bond = ref)} />
                  </TabPane>
                  <TabPane tab='银行间回购' key='4'>
                    <InterbankBack queryItems={inbackQuery} onRef={(ref) => (this.interbankBack = ref)} />
                  </TabPane>
                  <TabPane tab='理财直融' key='7'>
                    <FinaFlocking queryItems={finaQuery} onRef={(ref) => (this.finaFlocking = ref)} />
                  </TabPane>
                  <TabPane tab='非标' key='12'>
                    <NonstandardOrder queryItems={nonstandaerQuery} onRef={(ref) => (this.nonstandardOrder = ref)} />
                  </TabPane>
                </Tabs>
              </div>
            </div>
            {pageStatus == 2 && (
              <div>
                <AddNew
                  onClose={() => {
                    this.setState({ pageStatus: 1 });
                    let length = document.getElementsByClassName('mainTabPane').length;
                    for (let i = 0; i < length; i++) {
                      document.getElementsByClassName('mainTabPane')[i].scrollTop = 0; // 新增成功时使滚动条在顶部
                    }
                  }}
                  refresh={this.refresh}
                />
              </div>
            )}
          </div>
        }
      />
    );
  }
}

export default moreFundsOrder;
